import "./App.css";
import React, {Component} from "react";
import {
    Row,
    Col,
    Grid,
} from "react-bootstrap";
// import $ from 'jquery'
import {MarkdownListPanel, MarkdownArticle} from "./Markdown";
import {ArticlePage, ArticleListPanel} from "./Article";
import {MyNavBar} from "./MyNavBar"
import {LoginForm} from "./Login"


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 'home',
            articleId: 3,
            markdownPath: ""
        };
    }

    setPage(page) {
        this.setState({
            currentPage: page,
        })
    }

    getPage() {
        return this.state.currentPage
    }

    showLoginPage() {
        this.setPage('login')
    }

    showArticlePage(id) {
        console.log(id)
        this.setState({
            articleId: id,
            currentPage: 'home'
        })
    }

    showMarkdown(path) {
        this.setState({
            articleId: -1,
            currentPage: 'home',
            markdownPath: path
        })
    }

    render() {
        if (this.state.currentPage == null) {
            this.setPage('home')
        }
        var content = null
        if (this.state.currentPage === 'login') {
            content = <LoginForm></LoginForm>
        } else {
            if (this.state.articleId !== -1) {
                content = <ArticlePage articleId={this.state.articleId}/>
            } else {
                content = <MarkdownArticle markdownPath={this.state.markdownPath} />
            }
        }
        return (
            <div className="App">
                <div className="App-header">
                    <MyNavBar onLoginClicked={this.showLoginPage.bind(this)}/>
                </div>
                <div className="App-intro">
                    <Grid>
                        <Row className="Main">
                            <Col xs={4} md={4} sm={4} lg={4}>
                                <ArticleListPanel onArticleSelected={this.showArticlePage.bind(this)}/>
                                <MarkdownListPanel onMarkdownSelected={this.showMarkdown.bind(this)}/>
                            </Col>
                            <Col id="content" xs={8} md={8} sm={8} lg={8}>
                                {content}
                            </Col>
                        </Row>
                    </Grid>

                </div>
            </div>
        );
    }
}


export default App;
